<template>
  <div class="newLayoutStyle landTastDetail">
    <main-layout>
      <bar-title title="任务详情" back />
      <div class="itemBox" style="margin-top:12px">
        <ul class="itemList">
          <li>种植方案：<span>{{ details.name }}</span></li>
          <li>作业阶段：<span>{{ details.stageName }}</span></li>
          <li>农事任务：<span>{{ details.taskName }}</span></li>
          <li>作业内容：</li>
        </ul>
        <div class="taskContent" style="white-space:pre-line;" v-html="details.taskContent" />
        <ul class="itemList">
          <li>作业地块：<span style="color: #04AE70;padding:0 2px;">{{ JSON.parse(details.farmLandObjJstr||'{}')?.landCount||'-' }}</span>块 
            <span  style="color: #04AE70;padding:0 2px;">{{ JSON.parse(details.farmLandObjJstr||'{}')?.landMapAreaSize||'-' }}</span>亩                      
              <vxe-button mode="text"  status="primary" @click="openMap" content="(点击查看地块)"></vxe-button>
          </li>
        </ul>
        <ul class="itemList" style="display:block;">
          <li>完成日期：<span>{{ formatDate(details.taskStartTime) }} ~ {{ formatDate(details.taskEndTime) }}</span></li>
          <li>负责人：
            <span style="padding-top:4px" v-for="(dt,index) in JSON.parse(details.fuzeUserJstr||'{}').fzuserLineRspList" :key="dt.userId">
              {{ dt.realName }}
              <template v-if="index<JSON.parse(details.fuzeUserJstr||'{}').fzuserLineRspList.length-1">、</template>
            </span>
          </li>
          <li>作业状态：
            <!-- 任务状态[1->待确认；2->待处理；3->处理中；4->已延期；5->已完成；6->已取消]	 -->
            <span v-if="details.taskStatus==1" style="color:#FF9C00;">{{details.taskStatusMeaning}} </span>
            <span v-if="details.taskStatus==2" style="color:#4d70ff;">{{details.taskStatusMeaning}} </span>
            <span v-if="details.taskStatus==3" style="color:#3A92FF;">{{details.taskStatusMeaning}} </span>
            <span v-if="details.taskStatus==4" style="color:#ff7449;">{{details.taskStatusMeaning}} </span>
            <span v-if="details.taskStatus==5" style="color:#04AE70;">{{details.taskStatusMeaning}} </span>
            <span v-if="details.taskStatus==6" style="color:#7e7e7e;">{{details.taskStatusMeaning}} </span>
          </li>
        </ul>
      </div>
      <bar-title title="农事处理记录" style="background:none;margin:10px 0" />
      <div>
        <div class="fgLine" />
        <div class="itemBox">
          <ul class="itemList">
            <li>处理结果：</li>
          </ul>
          <div class="cljgTable">
          <vxe-table
            border
              style="width:100%;"
              show-overflow
              size="small"
              :min-height="80"
              :max-height="300"
              :row-config="{isHover: true}"
              :data="planteds"
              :scroll-y="{enabled: true}">
             <vxe-column align="center" title="日期"  field="createTime">
               <template #default="{ row }">
                {{formatDate(row.createTime)}}
                </template>
            </vxe-column> 
            <vxe-column align="left" title="作业地块"  field="farmLandName">
              <template #default="{ row }">
                {{ row.landCount }}地块、{{row.landArea}}亩
                </template>
            </vxe-column> 
            <vxe-column align="center" title="农事类型"  field="taskName" />
            <vxe-column align="center" title="生育时期"  field="shengyuqiName" />
            <vxe-column align="center" title="记录人"  field="createName" />
            <vxe-column align="center" title="现场记录"  field="landRemark">
              <template #default="{row}">
                <el-button type="text" icon="view" class="btn-view" size="small" @click="lookDetail(row)">查看明细</el-button>
                </template>
              </vxe-column>
          </vxe-table>
          </div>
        </div>
      </div>
      <vxe-modal v-model="selectLandVis" 
            :draggable="false" 
             title="地块信息" 
            :width="widthView" 
            :position="{top:60,left: 260}">
        <template #default>
          <farm-land-select
            :showFooter="false"
            v-if="selectLandVis"
            :plantingPlanId="details.plantingPlanId"
            :selectList ="selectList"
            @close="selectLandVis = false" />
        </template>
      </vxe-modal>
    </main-layout>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import mainLayout from '@/components/custom/mainLayout.vue'
import { getPlantLinelistDetail,getFarmTaskList} from '@/api/plant'
import barTitle from './components/barTitle.vue'
import farmLandSelect from '../plan/select-land.vue'
import { formatDate } from '@/utils/format'
import { useUserStore } from '@/pinia/modules/user'
const route = useRouter()
const userStore = useUserStore()
const plantingPlanTaskId = ref('')
const details = ref({})
const planteds = ref([])
const selectList = ref([])
const selectLandVis = ref(false)
const widthView = ref(window.innerWidth-260)


onMounted(async() => {
  const { currentRoute } = route
  plantingPlanTaskId.value = currentRoute.value.query.plantingPlanTaskId
  const res = await getPlantLinelistDetail(plantingPlanTaskId.value)
  if(res.success){
    details.value = res.data
  }
  // 处理列表
  getFarmTaskList({
    farmId: userStore.userInfo.farmId,
    companyId: userStore.userInfo.companyId,
    tancPlantingPlanTaskRecordQueryFilter:{
      plantingPlanTaskId: plantingPlanTaskId.value
    },
    taskRecordTypeList:[1,2]
  }).then(res => {
    if(res.success){
      planteds.value = res.data ||[]
    }
  })
  
})

const openMap =()=>
{
  let list = JSON.parse(details.value.farmLandObjJstr||'{}')?.taskLandLineRspList||[]
  selectLandVis.value = true
  window.setTimeout(() => {
    selectList.value =list.map((item)=>item.farmLandId)
  }, 1000);
}

const lookDetail = (item)=>{
  if(item.taskRecordType==1){
      route.push(`/manage/record/index?plantingPlanTaskRecordId=${item.plantingPlanTaskRecordId}&plantingPlanId=${item.plantingPlanId}&companyId=${item.companyId}&farmId=${item.farmId}`)
  }else{
      route.push(`/manage/crop/index?plantingPlanTaskRecordId=${item.plantingPlanTaskRecordId}&plantingPlanId=${item.plantingPlanId}&companyId=${item.companyId}&farmId=${item.farmId}`)
  }
}
</script>

<style lang="scss" scoped>
.btn-more{
  display: flex;
  justify-content: center;
  font-size: 14px;
  align-items: center;
  cursor: pointer;
  margin: 20px 0;
  color: #35ADB2;
}
.itemBox{
    background: #F7F7F7;
    border-radius: 0px 2px 2px 0px;
    border: 1px solid #EEEEEE;
    padding: 20px;
    .itemList{
        list-style: none;
        padding: 0;
        li{
            display: flex;
            align-items: center;
            flex: 1;
            flex-shrink: 0;
            flex-wrap: wrap;
            height: 30px;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 700;
            color: #333333;
            &::before{
                content: '';
                width: 5px;
                height: 5px;
                line-height: 0;
                overflow: hidden;
                border-radius: 50%;
                background-color: #999999;
                margin: 0 6px 0 0;
            }
            span{
                color: #999;
                font-weight:500
            }
        }
    }
    .taskContent{
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        padding: 0 0 0 12px;
    }
}
.fgLine{
    height: 1px;
    line-height: 0;
    overflow: hidden;
    background-color: #EDEDED;
    margin: 0 0 12px 0;
}
</style>
<style lang="scss">
.landTastDetail{
    .el-table{
        .thead{
            .el-table__cell{
                background-color: #F0F0F0;
            }
        }
    }
}
.cljgTable{
    .el-table--border{
        margin-bottom:0!important;
    }
}
.xuntiantags{
            display: inline-block;
            padding: 0 3px;
            margin: 0 0 0 2px;
            border: 1px solid #999;
            height: 20px;
            line-height: 18px;
            padding: 0 7px;
            min-width: 40px;
            text-align: center;
            border-radius: 10px;
            box-sizing: border-box;
            white-space: nowrap;
            font-size: 12px;
            &+.tags{
                margin-left: 5px;
            }
            &.EXUBERANT{
                background: #d1992520;
                border: 1px solid #d19925;
            }
            &.ROBUST{
                background: #E6F6F0;
                border: 1px solid #A7E2CC;
            }
            &.MEDIUM{
                background: #F1F8F5;
                border: 1px solid #C9E6D6;
            }
            &.BAD{
                background: #FEEFEF;
                border: 1px solid #FBBEBE; 
            }
        }
</style>
